<template>
  <div>
    <!-- 分页查询 -->
    <el-row>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="dialogFormVisibleAdd = true"
          plain
          style="width: 90%"
          >新增</el-button
        >
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="档案号 / 被干预人"
          type="text"
          style="width: 100%"
          v-model="name"
        />
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          style="width: 80%; margin-left: 16px"
          icon="el-icon-search"
          @click="page()"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="16"></el-col>
    </el-row>
    <hr />
    <el-table :data="list" border style="width: 100%;height=90%">
      <el-table-column prop="filenumber" label="档案号"> </el-table-column>
      <el-table-column prop="returntime" label="回访日期"> </el-table-column>
      <el-table-column prop="interposename" label="被干预人"> </el-table-column>
      <el-table-column prop="user.fullname" label="回访人员"></el-table-column>
      <el-table-column prop="visitmethod" label="方法"> </el-table-column>
      <el-table-column prop="returncontent" label="回访内容"> </el-table-column>
      <el-table-column prop="feedbackinfo" label="反馈信息"> </el-table-column>
      <el-table-column prop="handlingresult" label="处理结果">
      </el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{
            scope.row.status == 1
              ? "执行中"
              : scope.row.status == 2
              ? "已康复"
              : scope.row.status == 0
              ? "复查"
              : "异常"
          }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="loadupdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="Delete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="num"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- add -->
    <el-dialog
      title="新增"
      style="text-align: left"
      :visible.sync="dialogFormVisibleAdd"
    >
      <el-tabs
        v-model="addmenu"
        type="border-card"
        style="margin-top: -20px; height: 600px"
      >
        <el-tab-pane name="1" label="基本信息">
          <div style="margin-left: 50px; margin-top: 20px">
            <el-row>
              <el-col :span="2" style="text-align: auto">被干预人:</el-col>
              <el-col :span="5">
                <el-input
                  type="text"
                  style="width: 100%; margin-top: -10px"
                  size="small"
                  disabled
                  v-model="addform.interposename"
              /></el-col>
              <el-col :span="5" style="text-align: auto">.</el-col>

              <el-col :span="2" style="text-align: auto">* 档案号:</el-col>
              <el-col :span="5">
                <el-popover
                  placement="right"
                  v-model="cha"
                  width="700"
                  trigger="click"
                >
                  <el-table :data="addlist">
                    <el-table-column
                      width="150"
                      property="filenumber"
                      label="档案号"
                    ></el-table-column>
                    <el-table-column
                      width="100"
                      property="name"
                      label="姓名"
                    ></el-table-column>
                    <el-table-column
                      width="90"
                      property="age"
                      label="年龄"
                    ></el-table-column>
                    <el-table-column width="100" property="sex" label="性别">
                      <template slot-scope="scope">
                        {{ scope.row.sex == 1 ? "男" : "女" }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="110"
                      property="phonenumber"
                      label="联系方式"
                    ></el-table-column>
                    <el-table-column width="100" label="操作">
                      <template slot-scope="scope">
                        <el-button
                          type="primary"
                          @click="dian(scope.$index, scope.row)"
                          plain
                          >随访</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-input
                    slot="reference"
                    type="text"
                    style="width: 100%; margin-top: -10px"
                    size="small"
                    @blur="addcha()"
                    v-model="addform.filenumber"
                  />
                </el-popover>
              </el-col>
              <el-col :span="5" style="text-align: auto">.</el-col>
            </el-row>
            <hr />
            <el-row>
              <el-col :span="2" style="text-align: auto">方式:</el-col>
              <el-col :span="5">
                <el-select
                  v-model="addform.visitmethod"
                  style="width: 100%; margin-top: -10px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="电话" value="电话"> </el-option>
                  <el-option label="短信" value="短信"> </el-option>
                  <el-option label="邮件" value="邮件"> </el-option>
                </el-select>
              </el-col>
              <el-col :span="17" style="text-align: auto">.</el-col>
            </el-row>
            <hr />
            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">回访内容:</el-col>
              <el-col :span="22">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="addform.returncontent"
                  size="small"
                />
              </el-col>
            </el-row>
            <br />

            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">反馈信息:</el-col>
              <el-col :span="22">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="addform.feedbackinfo"
                  size="small"
                />
              </el-col>
            </el-row>
            <br />
            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">处理结果:</el-col>
              <el-col :span="22">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="addform.handlingresult"
                  size="small"
                />
              </el-col>
            </el-row>
          </div>
          <br />
        </el-tab-pane>
        <el-tab-pane name="2" label="附件">
          <div style="margin-left: 50px; margin-top: 20px">
            <el-row>
              <el-col :span="2" style="text-align: auto">主要:</el-col>
              <el-col :span="12">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="addform.attachment"
                  size="small"
                />
              </el-col>
              <el-col :span="10" style="text-align: auto">.</el-col>
            </el-row>
            <hr />

            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">数据文件:</el-col>
              <el-col :span="8">
                <el-upload
                  action="/rear/Interposefollowupvisit/File"
                  ref="upload"
                  name="pictureFile"
                  multiple
                  :limit="1"
                  :on-success="upsuccess"
                  list-type="picture-card"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file, this)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <br />
              </el-col>
              <el-col :span="14">.</el-col>
            </el-row>
            <br />
          </div>
          <br />
        </el-tab-pane>
      </el-tabs>
      <br />
      <el-row style="text-align: right">
        <el-col :span="18">.</el-col>
        <el-col :span="5">
          <el-button @click="dialogFormVisibleAdd = false" type="primary" plain
            >取消</el-button
          >
          <el-button
            style="margin-left: 20px; width: 40%"
            type="primary"
            @click="add()"
            >提交</el-button
          >
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </el-dialog>

    <!-- update -->
    <el-dialog
      title="修改回访"
      style="text-align: left"
      :visible.sync="dialogFormVisibleUpdate"
    >
      <el-tabs
        v-model="upmenu"
        type="border-card"
        style="margin-top: -20px; height: 600px"
      >
        <el-tab-pane name="1" label="基本信息">
          <div style="margin-left: 50px; margin-top: 20px">
            <el-row>
              <el-col :span="2" style="text-align: auto">被干预人:</el-col>
              <el-col :span="5">
                <el-input
                  type="text"
                  style="width: 100%; margin-top: -10px"
                  size="small"
                  disabled
                  v-model="upform.interposename"
              /></el-col>
              <el-col :span="5" style="text-align: auto">.</el-col>

              <el-col :span="2" style="text-align: auto">* 档案号:</el-col>
              <el-col :span="5">
                <el-input
                  type="text"
                  style="width: 100%; margin-top: -10px"
                  size="small"
                  disabled
                  v-model="upform.filenumber"
                />
              </el-col>
              <el-col :span="5" style="text-align: auto">.</el-col>
            </el-row>
            <hr />
            <el-row>
              <el-col :span="2" style="text-align: auto">方式:</el-col>
              <el-col :span="5">
                <el-select
                  v-model="upform.visitmethod"
                  style="width: 100%; margin-top: -10px"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="电话" value="电话"> </el-option>
                  <el-option label="短信" value="短信"> </el-option>
                  <el-option label="邮件" value="邮件"> </el-option>
                </el-select>
              </el-col>
              <el-col :span="17" style="text-align: auto">.</el-col>
            </el-row>
            <hr />
            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">回访内容:</el-col>
              <el-col :span="22">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="upform.returncontent"
                  size="small"
                />
              </el-col>
            </el-row>
            <br />

            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">反馈信息:</el-col>
              <el-col :span="22">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="upform.feedbackinfo"
                  size="small"
                />
              </el-col>
            </el-row>
            <br />
            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">处理结果:</el-col>
              <el-col :span="22">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="upform.handlingresult"
                  size="small"
                />
              </el-col>
            </el-row>
          </div>
          <br />
        </el-tab-pane>
        <el-tab-pane name="2" label="附件">
          <div style="margin-left: 50px; margin-top: 20px">
            <el-row>
              <el-col :span="2" style="text-align: auto">主要:</el-col>
              <el-col :span="12">
                <el-input
                  style="
                    text-align: left;
                    width: 90%;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                  "
                  type="textarea"
                  v-model="upform.attachment"
                  size="small"
                />
              </el-col>
              <el-col :span="10" style="text-align: auto">.</el-col>
            </el-row>
            <hr />

            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto">数据文件:</el-col>
              <el-col :span="8">
                <el-upload
                  action="/rear/Interposefollowupvisit/File"
                  ref="upload"
                  name="pictureFile"
                  multiple
                  :limit="1"
                  :on-success="upsuccess"
                  list-type="picture-card"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file, this)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <br />
              </el-col>
              <el-col :span="14">.</el-col>
            </el-row>
            <br />
          </div>
          <br />
        </el-tab-pane>
      </el-tabs>
      <br />
      <el-row style="text-align: right">
        <el-col :span="18">.</el-col>
        <el-col :span="5">
          <el-button
            @click="dialogFormVisibleUpdate = false"
            type="primary"
            plain
            >取消</el-button
          >
          <el-button
            style="margin-left: 20px; width: 40%"
            type="primary"
            @click="update()"
            >提交</el-button
          >
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页查询
      num: 1,
      size: 10,
      total: 2,
      list: [],
      name: "",

      dialogFormVisibleAdd: false,
      addmenu: "1",
      addform: {
        healthmgrid: this.$store.state.user.id,
        interposename: "",
        filenumber: "",
        visitmethod: "电话",
        returncontent: "",
        feedbackinfo: "",
        handlingresult: "",
        attachment: "",
      },

      fileList: [],
      member: { id: -1, filenumber: "" },

      dialogFormVisibleUpdate: false,
      upmenu: "1",
      upform: {},

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      addlist: [],
      cha: false,
    };
  },
  methods: {
    // 分页查询
    handleSizeChange(val) {
      this.size = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.num = val;
      this.page();
    },
    page() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载数据中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .get("/rear/Interposefollowupvisit/page", {
          params: { num: this.num, size: this.size, name: this.name.trim() },
        })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
          loading.close();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          loading.close();
        });
    },

    dian(index, row) {
      this.cha = false;
      this.member = row;
      this.addform.interposename = row.name;
      this.addform.filenumber = row.filenumber;
    },
    addcha() {
      this.cha = true;
      this.axios
        .get("/rear/Interposefollowupvisit/MemCha", {
          params: { name: this.addform.filenumber },
        })
        .then((res) => {
          this.addlist = res.data;
        });
    },

    upsuccess(response, file) {
      this.$notify({
        title: "成功",
        message: file.name + "上传成功！",
        type: "success",
      });
    },
    add() {
      if (this.member.id == -1) {
        this.$message({
          message: "警告! 您没有选中患者，请选择患者 ！",
          type: "warning",
        });
      }

      // add Image
      this.$refs.upload.submit();

      const loading = this.$loading({
        lock: true,
        text: "正在拼命提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .post("/rear/Interposefollowupvisit/add", this.addform)
        .then((res) => {
          if (res.data) {
            this.$message({
              message: "提交成功！",
              type: "success",
            });
          }
          this.dialogFormVisibleAdd = false;
          loading.close();
          this.page();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          this.dialogFormVisibleAdd = false;
          loading.close();
        });
    },
    handleRemove(file) {
      this.$refs.upload.handleRemove(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },

    loadupdate(index, row) {
      console.log(row);
      this.upform = row;
      this.dialogFormVisibleUpdate = true;
    },
    update() {
      this.upform.healthmgrid = this.$store.state.user.id;
      // add Image
      this.$refs.upload.submit();

      const loading = this.$loading({
        lock: true,
        text: "正在拼命提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .post("/rear/Interposefollowupvisit/update", this.upform)
        .then((res) => {
          if (res.data) {
            this.$message({
              message: "提交成功！",
              type: "success",
            });
          }
          this.dialogFormVisibleUpdate = false;
          loading.close();
          this.page();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          this.dialogFormVisibleUpdate = false;
          loading.close();
        });
    },
    Delete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/rear/Interposefollowupvisit/delete", {
              params: { id: row.id },
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.page();
            })
            .catch((res) => {
              this.$message.error("服务器出现问题，请联系管理员！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.page();
  },
};
</script>

<style>
</style>